<!-- 现场活动——步骤条 -->
<template>
	<view>
		<view class="box-top" :class="{ box_top_active: dataArray.length >= 1 }" v-for="(item, index) in dataArray" :key="index">
			<!-- <view class="left-box-top flex-column">
				<text class="year">{{ item.start_time.slice(0, 10) }}</text>
				<text class="time">{{ item.start_time.slice(10) }}</text>
			</view> -->
			<!-- 左边 -->
			<view class="line" :class="{ active: item.active, none: index == dataArray.length - 1 }">
				<!-- 中线 -->
				<view class="dot" :class="{ active: item.active }"></view>
				<!-- 圆点 -->
			</view>
			<view class="">
				<view class="Rigthbox">
					<view class="times">{{ item.start_time || '' }}</view>
					<view class="companybox">{{ item.company || '' }}</view>
				</view>
				<view class="right-box-top flex align-center" @click="toDetail(item.id)">
					<!-- 右边 -->
					<view class="img"><image :src="item.img_path" class="rounded_10" mode="aspectFit" style="width: 120rpx;height: 80rpx;"></image></view>
					<view class="" style="margin-left: 18rpx;">
						<view class="title text_hidden2">{{ item.title || '' }}</view>
						<view class="" style="display: flex;font-size: 24rpx; color:#999999;margin-top: 10rpx;">
							<view class="" v-if="item.catroom">展馆:{{ item.catroom }}</view>
							<view class="" v-if="item.catname" style="margin-left: 18rpx;">展位:{{ item.catname }}</view>
						</view>
					</view>
					<!-- <view>{{item.content}}</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		dataArray: {
			type: Array
		}
	},
	data() {
		return {};
	},
	mounted() {},
	methods: {
		toDetail(val) {
			uni.navigateTo({
				url: '/subPages/exhibition/activity/activety_detail?id=' + val
			});
		}
	}
};
</script>

<style scoped="scoped" lang="less">
.Rigthbox {
	display: flex;
	font-size: 24rpx;

	.times {
		border-radius: 10rpx;
		background-color: #cf1526;
		padding: 2rpx 4rpx 2rpx 4rpx;
		color: #ffffff;
	}

	.companybox {
		margin-left: 10rpx;
		color: #999999;
	}
}

.box_top_active {
	min-height: 100rpx !important;
}

.box-top {
	width: 100%;
	min-height: 170rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;

	.left-box-top {
		width: 120rpx;
		text-align: right;
		transform: translateY(-12rpx);

		.year {
			font-size: 20rpx;
		}

		.time {
			color: #cf1526;
			font-size: 28rpx;
			font-weight: 700;
		}
	}

	.line {
		width: 4rpx;
		background-color: rgba(228, 231, 237, 1);
		margin: 0 30rpx 0 4rpx;
		margin-top: 3rpx;

		.dot {
			width: 20rpx;
			height: 20rpx;
			// background-color: rgba(228,231,237,1);
			background-color: #fff;
			border: 2px solid rgba(228, 231, 237, 1);
			border-radius: 50%;
			position: relative;
			left: -9rpx;
			// top: 30rpx;
		}
	}

	.right-box-top {
		flex: 1;
		padding: 25rpx 0;
		width: 100%;
		// align-items: end;

		.img {
			// width: 30%;
			// width: 100rpx;
			// height: 60rpx;
			image {
				border-radius: 14rpx;
			}
		}

		.title {
			// width: 65%;
			// margin-left: 15rpx;
			font-size: 28rpx;
			color: #333333;
			line-height: 42rpx;
		}
	}
}

//激活元素
.active {
	// background-color: rgba(44,143,233,1) !important;
}

// 隐藏元素
.none {
	background-color: rgba(0, 0, 0, 0) !important;
}
</style>
